<template>
  <div style="margin: auto; width: 90%; margin-top: 3%">
    <el-row>
      <el-col :span="3"
        ><el-button
          type="warning"
          @click="
            form.type = 1;
            modelTitle = '新增菜品分类';
            dialogFormVisible = true;
          "
          >新增菜品分类</el-button
        ></el-col
      >
      <el-col :span="3"
        ><el-button
          type="warning"
          @click="
            form.type = 0;
            modelTitle = '新增套餐分类';
            dialogFormVisible = true;
          "
          >新增套餐分类</el-button
        ></el-col
      >
    </el-row>
    <!-- 表格部分 -->
    <el-table border:true :data="tableData" style="width: 100%" stripe>
      <el-table-column prop="name" label="分类名称" />
      <el-table-column label="分类类型">
        <template v-slot="{ row }">
          {{ row.type == 1 ? "菜品分类" : "套餐分类" }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-link
            type="primary"
            @click="
              updateForm = JSON.parse(JSON.stringify(row));
              updateFormVisible = true;
            "
            >修改</el-link
          >
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            title="此操作将永久删除该文件, 是否继续?"
            @onConfirm="deleteCategory(row)"
          >
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center; margin-top: 3%"
    >
    </el-pagination>

    <!-- 添加模态框 -->
    <el-dialog
      :title="modelTitle"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form" label-width="30%">
        <el-form-item label="分类名称:">
          <el-input
            v-model="form.name"
            style="width: 60%"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input
            v-model="form.sort"
            style="width: 60%"
            placeholder="请输入排序"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog title="修改分类" :visible.sync="updateFormVisible" width="30%">
      <el-form :model="form" label-width="30%">
        <el-form-item label="分类名称:">
          <el-input
            v-model="updateForm.name"
            style="width: 70%"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input
            v-model="updateForm.sort"
            style="width: 70%"
            placeholder="请输入排序"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCategory()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategory,
  deleteCategory,
  addCategory,
  updateCategory,
} from "@/api/category";
import router from "@/router";
export default {
  data() {
    return {
      tableData: [],
      pageInfo: { page: 1, pageSize: 10 },
      total: 0,
      form: { name: "", type: "1", sort: "" },
      updateForm: { id: "", name: "", sort: "" },
      dialogFormVisible: false,
      updateFormVisible: false,
      modelTitle: "",
    };
  },
  created() {
    this.init();
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.form = {};
      }
    },
  },
  methods: {
    init() {
      getCategory({ ...this.pageInfo }).then((res) => {
        const { records, total } = res.data;
        this.tableData = records;
        this.total = total;
      });
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      this.init();
    },
    async deleteCategory(row) {
      const res = await deleteCategory({ id: row.id });
      if (res.code == 0) {
        this.$message.error(res.msg);
      } else {
        this.$message.success(res.msg);
      }
      this.init();
    },
    async addCategory() {
      this.dialogFormVisible = false;
      const res = await addCategory(this.form);
      if (res.code == 1) {
        this.$message.success(res.data);
      } else {
        this.$message.error(res.data);
      }
      this.init();
    },
    async updateCategory() {
      this.updateFormVisible = false;
      const res = await updateCategory(this.updateForm);
      if (res.code == 1) {
        this.$message.success(res.data);
      } else {
        this.$message.error(res.data);
      }
      this.init();
    },
  },
};
</script>